<template>
    <a-layout style="height: 100vh;overflow: hidden;">
        <a-layout-side>
            <side-bar></side-bar>
        </a-layout-side>
        <a-layout>
            <a-layout-header>
                <Header></Header>
            </a-layout-header>
            <a-layout-content class="content">
                <router-view></router-view>
            </a-layout-content>
            <a-layout-footer>
                <Footer></Footer>
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script setup>
import SideBar from '../components/SideBar.vue';
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
</script>

<style scoped>
.content {
    padding: '10px';
    background: '#fff';
    overflow-y: auto;
}
</style>